import MyIcon from '@/components/MyIcon';
import { getColorTextLoadMap } from '@/utils';
import { Col, Row, Timeline } from 'antd';
import { useContext } from 'react';
import { WorkflowCheckRecordContext } from '../common';

/**  流程结束组件 */
export const WorkflowNodeEnd: React.FC<WorkflowChedkRecordAPI.IWorkflowNodeEnd> = ({
  taskNodeInfo, //结束流程节点
}) => {
  const { prefixCls, allOpenNodeBody } = useContext(WorkflowCheckRecordContext);

  const resultInfoObj = getColorTextLoadMap(taskNodeInfo?.checkResultName); //处理结束节点审批结果

  return (
    <Timeline.Item
      key={`${taskNodeInfo?.id}`}
      dot={
        taskNodeInfo?.endTime && (
          <MyIcon
            type="icon-time-circle"
            style={{
              fontSize: '18px',
            }}
          />
        )
      }
    >
      <div className={prefixCls + 'taskNodesTitleBox'}>
        <span className={prefixCls + 'taskNodesTitleBox-nodesUserBox'}>
          【{taskNodeInfo.startPositionName || '--'}】 经办人&nbsp;&nbsp;
          {taskNodeInfo.starterName || '--'}
        </span>
        {taskNodeInfo?.endTime && (
          <>
            发起审批流程，于
            <span className={prefixCls + 'taskNodesTitleBox-nodesUserTimeBox'}>
              {taskNodeInfo?.endTime}
            </span>
            最终审核结果为
            <span
              className={prefixCls + 'taskNodesTitleBox-nodesTaskResult'}
              style={{
                color: resultInfoObj?.color,
              }}
            >
              {resultInfoObj?.colorText}
            </span>
          </>
        )}
      </div>
      {allOpenNodeBody && taskNodeInfo?.endTime && (
        <Row gutter={[0, 4]} className={prefixCls + 'taskNodesBodyCard'}>
          <Col span={8}>
            <div className={prefixCls + 'taskNodesBodyCard-labelText'}>
              开始时间：
            </div>
            <div className={prefixCls + 'taskNodesBodyCard-valueText'}>
              {taskNodeInfo?.startTime || '--'}
            </div>
          </Col>
          <Col span={16}>
            <div className={prefixCls + 'taskNodesBodyCard-labelText'}>
              处理时长：
            </div>
            <div className={prefixCls + 'taskNodesBodyCard-valueText'}>
              {taskNodeInfo?.durationFormat || '--'}
            </div>
          </Col>
          <Col span={24}>
            <div className={prefixCls + 'taskNodesBodyCard-labelText'}>
              处理结果：
            </div>
            <div
              className={prefixCls + 'taskNodesBodyCard-valueText'}
              style={{
                color: resultInfoObj?.color,
              }}
            >
              {resultInfoObj?.colorText || '--'}
            </div>
          </Col>
        </Row>
      )}
    </Timeline.Item>
  );
};
